<template>
  <div class="xtx-home-page">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <HomeCategory></HomeCategory>
        <!-- 轮播图 -->
        <div class="home-banner">
          <XtxCarousel :sliders="sliders" autoPlay></XtxCarousel>
        </div>
      </div>
    </div>
    <!-- 新鲜好物 -->
    <HomeNew></HomeNew>
    <!-- 人气推荐 -->
    <HomeHot></HomeHot>
    <!-- 热门品牌 -->
    <HomeBrand></HomeBrand>
  </div>
</template>
<script>
import HomeBrand from './components/home-brand.vue'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
import HomeCategory from './components/home-categroy.vue'
import { ref, onMounted } from 'vue'
import { getBanner } from '@/api/home.js'
export default {
  name: 'xtx-Home-page',
  components: { HomeCategory, HomeNew, HomeHot, HomeBrand },
  setup() {
    // 1.定义装轮播图的响应式数据
    // 数据是响应式数据才能够在页面上展示，并且后台有记录
    const sliders = ref([])
    // 调接口获取数据
    onMounted(async () => {
      const data = await getBanner()
      console.log(data)
      sliders.value = data.result
    })
    return { sliders }
  }
}
</script>
<style lang="less" scoped>
/* 通过变量开控制网站中通用的东西，后期做修改的时候比较方便一些 */
/* 声明变量 */
/* 这里的全局的意思是写了后可以在所有的样式选择器中使用 */
/*  */
.xtx-home-page {
  .home-banner {
    width: 1240px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 98;
    // 覆盖轮播图组件样式
    .xtx-carousel {
      width: 100%;
      height: 100%;
      // 子组件看不见的内容（组件内部）
      ::v-deep {
        .carousel-btn.prev {
          left: 270px;
        }
        .carousel-indicator {
          padding-left: 250px;
        }
      }
    }
  }
}
</style>
